<template>
	<view class="content">
		<Header></Header>
		<view class="member-box">
			<u-swiper :list="bannerList" mode='rect' border-radius='0' height='375'></u-swiper>
			<view class="section-box">
				<image style="width: 30rpx; height: 30rpx;" src="../../static/icon3.png" mode=""></image>
				<uni-section title="自定义分隔符" type="line" padding>
					<uni-breadcrumb separator=">">
						<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
							{{route.name}}
						</uni-breadcrumb-item>
					</uni-breadcrumb>
				</uni-section>
			</view>
			<view class="trends-box">
				<view class="tabs-box">
					<u-subsection :list="newsTabs" :current="current" mode='button' active-color='#fff'
						inactive-color='#000' button-color='#0056A2' bg-color="#F5F9FD"></u-subsection>
				</view>
				<view class="trends-list">
					<view class="trends-item" v-for="(item,index) in trendsList" :key="index" @click="gotoDetail">
						<view class="item-date">{{item.date}}</view>
						<view class="item-text">{{item.text}}</view>
					</view>
				</view>	
				<page-pagination :total="page.total" :pageSize="page.pageSize" color="#285CAC" :btnText="true" :showAround="true"
					:showPageSize="8"></page-pagination>
			</view>
		</view>
		<Footer></Footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					total: 10,
					pageSize: 4
				},
				trendsList:[{
					date:'04-03 2023',
					text:'中鼎资信与省融资再担保有限责任公司签订战略合作协议'
				},
				{
					date:'04-03 2023',
					text:'中鼎资信与省融资再担保有限责任公司签订战略合作协议'
				},
				{
					date:'04-03 2023',
					text:'中鼎资信与省融资再担保有限责任公司签订战略合作协议'
				},
				{
					date:'04-03 2023',
					text:'中鼎资信与省融资再担保有限责任公司签订战略合作协议'
				},
				{
					date:'04-03 2023',
					text:'中鼎资信与省融资再担保有限责任公司签订战略合作协议'
				},
				{
					date:'04-03 2023',
					text:'中鼎资信与省融资再担保有限责任公司签订战略合作协议'
				}],
				current: 1,
				newsTabs: [{
						name: '行业新闻'
					},
					{
						name: '协会新闻'
					},
					{
						name: '会员动态'
					},
					{
						name: '政策法规'
					}
				],
				routes: [{
						to: "/pages/index/index",
						name: "首页",
					},
					{
						to: "/pages/newsTrends/index",
						name: "资讯中心",
					},
					{
						to: "/pages/newsTrends/index",
						name: "行业动态",
					},
				],
				bannerList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		methods:{
			gotoDetail(){
				uni.navigateTo({
					url:'/pages/trendsDetail/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.member-list {
		padding: 20rpx;
		margin-bottom: 40rpx;

	}
	
	.tabs-box{
		padding: 20rpx;
		background-color: #F5F9FD;
	}
	
	.trends-list{
		padding: 0 20rpx;
		margin-bottom: 40rpx;
		.trends-item{
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx dashed #DFDFDF;
			
			.item-date{
				width: 100rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #F7F9FC;
				border-radius: 5rpx;
				text-align: center;
				color: #787878;
				margin-right: 5rpx;
			}
		}
	}
</style>